<script setup lang='ts'>
import { onLoad } from '@dcloudio/uni-app'
import { queryWxPayStatusAPI, wxPayAPI,updateOrderStatusAPI } from '@/services/pay'
import { ref } from 'vue'
import type { PayDto } from '@/types/pay'
import { OrderState } from '@/services/constants'

const query = defineProps<{
  chId: string
}>()

// 二维码弹出层的开启
const urCode = ref<PayDto>()
let timer: ReturnType<typeof setTimeout> | null = null
onLoad(async () => {

  const res = await wxPayAPI(query.chId)
  urCode.value = res.data

  // 查询支付是否成功
   let timer = setInterval(async () => {
    const res = await queryWxPayStatusAPI(urCode.value?.orderNo)
    if (res.code === 200) {
      // 清除定时器
      clearInterval(timer)
      // timer = null
      await uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 })
      // 进行页面的跳转
      await uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.chId}` })
    }
  }, 3000)
})

// 倒计时结束事件
const orderStatus = ref('未支付')
const onTimeup = () => {
  // 修改订单状态为已取消
  // orderDetail.value!.orderStatus = OrderState.YiQuXiao
  //修改订单状态为已取消
  updateOrderStatusAPI(urCode.value?.orderNo);

  orderStatus.value = '支付超时'
  uni.showToast({
    title: '支付超时',
    duration: 2000,
  })
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    })
  }, 2000)
}
</script>

<template>
  <view class='page'>
    <view class='tips'>
      <!--            <text class='money'>应付金额: ¥ {{ orderDetail?.totalMoney.toFixed(2) }}</text>-->
      <view class='money'>应付金额: ¥ {{ urCode?.price }}</view>
      <view class='time'>
        <text>支付剩余</text>
        <uni-countdown
          :second='60'
          color='#000'
          splitor-color='#000'
          :show-day='false'
          :show-colon='false'
          @timeup='onTimeup'
        />
      </view>
    </view>
    <view class='qrcode'>
      <HosUqrcode
        canvas-id='qrcode'
        :value='urCode?.codeUrl'
        :options='{ margin: 10 }'
      ></HosUqrcode>
    </view>
  </view>
</template>

<style scoped lang='scss'>
.page {
  background-color: #00bb99;
  height: 100vh;
  text-align: center;

  .tips {
    padding: 50rpx 0;

    .time {
      margin: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .qrcode {
    width: 100%;
    text-align: center;
    margin-left: 25%;
  }
}
</style>
